<template>
  <div class="home">
     <van-nav-bar
        title="首页"
        >
        <template #left>           
            <city/>
        </template>
      </van-nav-bar>
     <van-loading v-if="!isload" size="24px" vertical>加载中...</van-loading>

      <div v-if="isload">
       

      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="pink">
          <van-swipe-item v-for="v in lb" :key="v.id">
              <img width="100%" :src="v.imgSrc" alt="">
          </van-swipe-item>
         
      </van-swipe>

      <!-- 导航 -->
       <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="v in nav" :key="v.txt" @click="gohz(v)">
          <van-image :src="v.src" />
          <br>
          <div>
            {{v.txt}}
          </div>
        </van-grid-item>
        
      </van-grid>
      
      <!-- 小组 -->
      <h3 class="title">租房小组</h3>
      <van-grid :border="true" :column-num="2">
        <van-grid-item v-for="v in group" :key="v.id" >
          <van-image :src="v.imgSrc" />
          <br>
          <div>
            <h4>{{v.title}}</h4>
          </div>
           <div>
            {{v.desc}}
          </div>
        </van-grid-item>
        
      </van-grid>
      <!-- 新闻资讯 -->
      <h3 class="title">新闻资讯</h3>
      <van-card
        v-for="v in news"
        :key="v.id"
      centered
    
        
        :title="v.title"
        :thumb="v.imgSrc"
      >
        <template #tags>
          <van-tag plain type="warning">{{v.from}}</van-tag>
          <br>
          <br>
          <van-tag plain type="success">{{v.date}}</van-tag>
        </template>
       
      </van-card>

      </div>
  </div>
</template>

<script>
// 引入城市
import city from "../components/GetCity.vue"
export default {
  data () {
    return {
      lb:[],// 轮播图
      nav:[// 导航
        {txt:"整租",src:require("../assets/images/nav-1.png"),path:"/tab/house"},
        {txt:"合租",src:require("../assets/images/nav-2.png"),path:"/tab/house"},
        {txt:"地图找房",src:require("../assets/images/nav-3.png"),path:"/tab/house"},
        {txt:"去出租",src:require("../assets/images/nav-4.png"),path:"/tab/house"},

      ],
      group:[],// 小组
      news:[],// 新闻资讯
      isload:0,// 是否加载完毕
    }
  },
    components:{
        // 注册
        city
    },
    methods: {
      async getLb(){// 获取轮播数据
         this.$axios.getLb()
         .then(res=>{
           console.log(res);
           if(res.data.code==200){
             this.lb=res.data.msg
           }
         })
      },
      async getGroup(){
         this.$axios.getGroup()
         .then(res=>{
           console.log(res);
           if(res.data.code==200){
             this.group=res.data.msg
           }
         })
      },
      async getNews(){
        this.$axios.getNews()
        .then(res=>{
           console.log(res);
           if(res.data.code==200){
             this.news=res.data.msg
           }
         })
      },
      gohz(v){// 导航跳转
         this.$router.push(v.path)
      }
    },
    async mounted () {
      await this.getLb()
      await this.getGroup()
      await this.getNews()
      this.isload=1
    }
}
</script>

<style>
   .title{
     background: gainsboro;
     padding: 10px;
   }
</style>